<template>
  <el-card class="box-card table">
    <template #header>
      <div class="card-header">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>权限新增</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <router-link :to="{ path: '/auth/menu/list' }">
          <el-button
            class="button"
            type="success"
            icon="el-icon-back"
            size="small"
            >返回</el-button
          >
        </router-link>
      </div>
    </template>
    <div class="body">
      <el-form
        :model="form"
        ref="form"
        status-icon
        :rules="rules"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-form-item label="父级权限" prop="parent_id">
            <el-select v-model="form.parent_id" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="权限编码" prop="code">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="权限类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option value="0" label="菜单"></el-option>
              <el-option value="1" label="按钮"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model="form.permission"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="路由地址" prop="path">
            <el-input v-model="form.path"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" type="number"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="是否禁用" prop="forbidden">
            <el-select v-model="form.forbidden" placeholder="请选择">
              <el-option value="1" label="是"></el-option>
              <el-option value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('form')">创建</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { menuAdd,getFirstMenu } from "@/api/index.js";
import { ElMessage } from "element-plus";
export default {
  name: "MenuAdd",
  data() {
    return {
      form: {
        parent_id: null,
        code: null,
        name: null,
        type: null,
        permission: null,
        icon: null,
        path: null,
        component: null,
        sort: null,
        forbidden: null,
      },
      options:null,
      rules: {
        parent_id: [
          { required: true, message: "请选择父级权限", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入权限编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择权限类型", trigger: "blur" }],
        permission: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
      },
    };
  },
  mounted() {
    var that=this
    getFirstMenu().then(function(res){
      if(res.code==1){
        that.options=res.data
      }
    }).catch();
  },
  methods: {
    async submitForm(form) {
      //自动验证
      this.$refs[form].validate((valid) => {
        if (!valid) {
          return false;
        }
      });
      // console.log(this.form);
      await menuAdd(this.form)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            ElMessage.success({
              message: "新增成功",
              type: "success",
            });
          } else {
            ElMessage.error({
              message: res.message,
              type: "eroor",
            });
          }
        })
        .catch((error) => {});
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>
<style scoped>
input[type="number"]{
  -webkit-appearance:textfield;
  -moz-appearance:textfield;
  -o-appearance:textfield;
  -ms-appearance:textfield;
  appearance:textfield;
}
</style>